<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>后台管理系统注册页面</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      .box {
        width: 500px;
        height: 80%;
        background: url(bg1.jpg) no-repeat center center;
        margin-top: 40px;
        /* background-color: rgba(226, 162, 43, 0.507); */
        margin: 0 auto;
        padding: 50px;
        text-align: center;
      }
      input {
        margin: 50px;
      }
      .box #btn {
        width: 100px;
        height: 30px;
        border-radius: 5px;
        border: none;
        background-color: rgba(0, 60, 255, 0.562);
      }
    </style>
    <!-- 引用js -->
    <script src="./axios.min.js"></script>
  </head>
  <body>
    <div class="box">
      用&nbsp;户&nbsp;名&nbsp;：<input
        type="text"
        name=""
        id=""
        placeholder="请输入任意字符"
      /><span></span>
      <br />
      &nbsp;密&nbsp;&nbsp;&nbsp;&nbsp;码&nbsp;：<input
        type="text"
        name=""
        id=""
        placeholder="请输入六位数以上任意字符密码"
      />
      <br />
      <input type="button" name="" id="btn" value="点击注册" />
    </div>
    <script>
      //利用ajax
      //获取所有input
      let ipts = document.querySelectorAll("input");
      //按钮点击事件
      ipts[2].onclick = function () {
        //获取用户名，第一个输入框的内容
        let username = ipts[0].value;
        //获取密码，第二个输入框的内容
        let password = ipts[1].value;

        //2.发起请求
        //接口地址：http://jx.xuzhixiang.top/ap/api/reg.php
        let regAPI = "http://jx.xuzhixiang.top/ap/api/reg.php";
        //引用js
        //固定格式
        //axios.发送方式（请求地址，{函数params：{属性值：属性名，属性值：属性名....}}）
        axios.get(regAPI, { params: { username, password } }).then((r) => {
          //知道什么时候请求成功
          //.then（箭头函数r=>{打印r为结果}）
          //数据在r.data里面，服务器返回的数据
          console.log(r.data);
          //r.data.msg成功的提示
          alert(r.data.msg);
          //当r.data.code=1代表成功
          if (r.data.code == 1) {
            // 跳转登录页面
            location.href = "week5登录.html";
          }
        });
      };
    </script>
  </body>
</html>
